<template>

	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-main" :isBack="true">
			<block slot="content">添加门禁权限</block>
		</cu-custom>
		<view class="bg-white">
			<view class="padding-sm flex justify-between align-center">
				<text class="text-lg">房间：</text>
				<zqs-select @change="fjChange" placeholder="选择房间" value-key="fjid" label-key="fjmc" title="选择房间"
					:list="fjs" v-model="fj.fjid"></zqs-select>
			</view>
		</view>


		<view class="bg-white padding-sm">
			<view class=" flex justify-between align-center">
				<text class="text-lg">日期：</text>
				<text :class="dateOption.sd == '选择开始日期' ? 'text-gray' : ''" @click="openDate">
					<text v-if="dateOption.sd && dateOption.ed">{{dateOption.sd}} ～ {{dateOption.ed}}</text>
					<text v-else>选择开始日期 ～ 选择结束日期</text>
					<text class="cuIcon-right"></text>
				</text>
			</view>
			<xiaomiaogu-good-date-picker ref="goodDatePicker" @change="changeDate"
				:option="dateOption"></xiaomiaogu-good-date-picker>
		</view>

		<view class="bg-white padding-sm">
			<view>
				<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
					<view class="cu-item" :class="key==TabCur?'text-main cur':''" v-for="(item, key) in dateObj" :key="key"
						@tap="tabSelect" :data-id="key" :data-index="item.index">
						{{key}}【{{item.weekStr}}】
					</view>
				</scroll-view>
				<view class="padding-xs" v-show="key==TabCur" v-for="(item, key) in dateObj" :key="key">
					<view class="padding">
						<text @tap="addSkjl(item, key)" class="padding-sm round bg-orange">添加</text>
					</view>
					<scroll-view scroll-y class="bg-gray" style="max-height: 60vh;">
						<view class="cu-timeline" v-for="(item, index) in item.skjls" :key="index">
							<view class="cu-item">
								<view class="radius bg-gray shadow ">
									<view class="flex justify-start align-center">
										<view style="width: 16%;" class="padding-xs relative">
											<view class="img-cover relative">
											</view>
											<view v-if="item.tx" class="absolute top0 w-100 h-100">
												<image class="w-100 h-100 round" mode="aspectFill" :src="item.tx"></image>
											</view>
										</view>
										<view style="width: 84%;" class="padding-xs">
											<view class="padding-xs flex justify-between align-center">
												<text>
													<text v-if="item.mc" class=" ">{{item.mc}}</text>
													<text v-if="item.st" class=" ">{{item.tel}}</text>
												</text>
												<text class="">
													<text @tap="rmSkjl(item, index)" class="text-red">删除</text>
													<text style="color: rgba(1, 1, 1, 0)" class="cuIcon-right "></text>
												</text>
											</view>
											<view class="padding-xs flex justify-start align-center">
												<text class="text-main ">
													<text v-if="item.st">{{item.st}}</text>～
													<text v-if="item.et">{{item.et}}</text>
												</text>
												<!-- <text>查看<text class="cuIcon-right "></text></text> -->
											</view>
										</view>
									</view>
								</view>
							</view>
						
						</view>
					</scroll-view>
					
					
				</view>
			</view>
		</view>
		<view  v-if="skjl">
			<skjl-new :skjl="skjl" @finish="finish"></skjl-new>
		</view>
	</view>
</template>

<script>
	import skjlnew from "../fj/skjlnew.vue";
	export default {
		components: {
			"skjl-new": skjlnew,
		},
		data: function() {
			return {
				TabCur: "",
				scrollLeft: 0,
				md: {
					mdid: "",
				},
				fj: {
					fjid: "",
					func: "DANC",
					tp: "DB",
					dj: 60,
				},

				tp: {},
				func: {},
				locamap: {},

				skjl: undefined,
				skjls: [],

				mds: [],
				fjs: [],

				dateOption: {
					isRange: true,
					isModal: true,
					isShowSubmit: false,
					sd: "",
					ed: "",
					dateNum: 0,
					cd: ""
				},
				
				dateObj: {},

			};

		},
		created: function() {
			this.constant.get("ROOMFUNC").then(data => {
				this.func = data.ROOMFUNC;
			});
			this.constant.get("ROOMTP").then(data => {
				this.tp = data.ROOMTP;
			});
			this.constant.get("QTYPE").then(data => {
				this.qtype = data.QTYPE;
			});
			this.mds = this.constant.mds;
		},
		onLoad: function(option) {
			this.md.mdid = option.mdid;
			this.fj.fjid = option.fjid;
			this.mdChange({
				mdid: option.mdid
			});
			this.fjChange({
				fjid: option.fjid
			});

		},

		methods: {
			loadSkjlsByDate: function(mdid, fjid, sd, ed) {
				this.api("/skjl/date/get").send({
					mdid,
					fjid,
					sd,
					ed
				}).then(data => {
					for (let key in data.dateObj) {
						this.TabCur = key;
						break;
					}
					this.dateObj = data.dateObj;
				});
			},
			
			tabSelect: function(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.index - 1) * 60
			},
			addSkjl: function(item, rq) {
				this.skjl = {
					skjlid: this.common.generateID("SKJL"),
					mc: "",
					tx: "",
					tel: "",
					kcid: "",
					fjid: this.fj.fjid,
					mdid: this.md.mdid,
					mjid: "",
					rq,
					st: "",
					et: "",
				};
			},
			rmSkjl: function(skjl, index) {
				this.api("/skjl/date/remove").send({
					skjlid: skjl.skjlid
				}).then(data => {
					this.message.info("删除成功");
					this.dateObj[skjl.rq].skjls.splice(index, 1);
					this.$forceUpdate();
				});
			},
			finish: function(skjl) {
				if (skjl) {
					let rt = this.dateObj[skjl.rq];
					console.log(rt);
					if (rt) {
						if (!rt.skjls) {
							rt.skjls = [];
						}
						rt.skjls.push(skjl);
					}
				}
				this.skjl = false;
				this.$forceUpdate();
			},
			mdChange: function(e) {
				this.md = e;
				this.fjs = [];
				this.fj.fjid = "";
				this.api("/fj/list/get").send({
					mdid: e.mdid,
					jyms: "SD"
				}).then(data => {
					this.fjs = data.fjs;
				});
			},
			fjChange: function(e) {
				this.fj.fjid = e.fjid;
			},
			openDate: function() {
				this.$refs.goodDatePicker.open();
			},
			changeDate: function(e) {
				this.dateOption.sd = e.startDate;
				this.dateOption.ed = e.endDate;
				this.dateOption.dateNum = e.dateNum;
				this.loadSkjlsByDate(this.md.mdid, this.fj.fjid, this.dateOption.sd, this.dateOption.ed);
			},

		},

	}
</script>

<style scoped>



</style>